<template>
  <div class="login">
      <div class="login-box">
        <div class="title">图书管理系统</div>
        <div class="loginForm">
          <a-form ref="ruleForm" :model="form" :rules="rules" @finish="handleSubmit">
            <a-form-item name="username">
              <a-input
                type="text"
                v-model:value="form.username"
                placeholder="请输入手机号(首次登录自动注册)"
              >
                <template v-slot:prefix><UserOutlined /></template>
              </a-input>
            </a-form-item>
            <a-form-item name="password">
              <a-input
                type="password"
                v-model:value="form.password"
                placeholder="请输入密码"
              >
                <template v-slot:prefix><LockOutlined /></template>
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-button class="submit" type="primary" html-type="submit" :loading="isloading">登录</a-button>
            </a-form-item>
          </a-form>
        </div>
      </div>
</div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
      },
      rules:{
        username: [{ required: true, message: '请输入用户名' }],
        password: [{ required: true, message: '请输入密码' }],
      },
      isloading:false
    };
  },
  methods: {
    handleSubmit(values) {
      this.isloading=true;
      this.$http.get('/login',values).then(res => {
          this.isloading=false;
          if (res.code === 0) {
            this.$message.success(`欢迎${res.nickname} , 登录成功!`);
            localStorage.token = res.token
            localStorage.type = res.type
            localStorage.username = res.username
            localStorage.nickname = res.nickname
            localStorage.avatar = res.avatar
            localStorage.userId = res.id
            this.$root.userId = res.id
            this.$root.avatar = res.avatar
            this.$root.nickname = res.nickname
            this.$root.isAdmin = res.type==='0'
            this.$router.push('/')
          } else {
            this.$message.error(res.msg);
          }
        });
    }
  }
};
</script>

<style scoped>
.submit{
  width: 100%;
}
.title{
  margin: 50px 0 40px 0;
  font-weight: 700;
  font-size: 20px;
  text-align: center;
}
.login-box{
  width: 380px;
  border-radius: 10px;
  background: #fff;
  float: right;
  margin-top: 200px;
  margin-right: 230px;
  padding: 0 46px;
}
.login{
  background-image: url("../assets/back.png");
  height: 100vh;
  background-size: cover;
  background-position: center;
}
</style>
